{{extend 'layout.html'}}
<script>
    $(function() {
        $("table#staff").tablesorter({ sortList: [[3,0]] , 
            headers: {
                4: { sorter: false }
            }
        });

    });
</script>
{{for c_id in committees:}}
{{committee = committees[c_id]}}
<ul class="pills" data-tabs="pills">
    <li class="active"><a href="#staff">Staff</a></li>
    <li><a href="#mailing-list">Mailing List</a></li>
    <li><a href="#details">Details</a></li>
</ul>
<div class="pill-content">
    <div class="active" id="staff">
        <table id="staff" class="zebra-striped">
            <thead>
                <tr>
                    <th class="header">Name</th>
                    <th class="header">Start Date</th>
                    <th class="header">End Date</th>
                    <th class="header">Position</th>
                    <th class="header">Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- TODO: this should use CommitteeMemberEntity -->
                {{for s in committee['staff']:}}
                {{id = s['id']}}
                <tr>
                    <td>
                        {{=s['name']}}
                    </td>
                    <td>
                        {{=s['started']}}
                    </td>
                    <td>
                        {{=s['ended']}}
                    </td>
                    <td>
                        {{=s['position']}}
                    </td>
                    <td>
                        <!-- TODO: add "are you sure? dialogs -->
                        <a class="small btn info" 
                            href="{{=URL('staff','view',args=(id))}}"
                            id="view_{{=id}}">view</a> 
                        {{if s['position'] != 'director':}}
                        <a class="small btn success" 
                            href="{{=URL('committees','promote',args=(c_id,id))}}"
                            id="join_{{=id}}">promote</a> 
                        {{pass}}
                        {{if s['active']:}}
                        <a class="small btn danger" 
                            id="quit_{{=id}}" 
                            href="{{=URL('committees','demote',args=(c_id,id))}}">demote</a>
                        {{pass}}
                    </td>
                </tr>
                {{pass}}
            </tbody>
        </table>
    </div>
    <div id="details">
        <form id="committee_options" class="form" method="POST"
            action="/radio/committee/options">
            <fieldset>
                <legend>Committee Details</legend> 

                <div class="clearfix">
                    <label for="name">Title *</label>
                    <div class="input">
                        <input class="xlarge" id="name" name="name" size="30"
                        type="text" value="{{=committee['details']['name']}}">
                        </input>
                    </div>
                </div>

                <div class="clearfix">
                    <label for="auto_approve">Notification Emails</label>
                    <div class="input">
                        <input id="staff" 
                        name="staff" 
                        type="checkbox" checked>
                    </div>
                </div>

                <div class="clearfix">
                    <div class="input">
                        <input class="btn primary" id="staff" name="staff" 
                        type="submit" value="Submit">
                    </div>
                </div>

            </fieldset>
        </form>
    </div>
    <div id="mailing-list">
        <textarea class="xxlarge" name="mailing_list" id="mailing_list" rows="5"
            disabled="">{{for st in committee['staff']:}}{{=st['email']}}, {{pass}}</textarea>
        <div class="clearfix">
        <button class='btn' name='copy' id='copy' onsubmit="copy('mailing_list')">
            Copy Mailing List to Clipboard
        </button>
    </div>
    </div>
</div>
{{pass}}
